<template>
  <div class="member-order">
    <!-- <RouterLink to="/member/order/1001">订单1</RouterLink>
    <RouterLink to="/member/order/1002">订单2</RouterLink> -->
    <!-- 体验jsx语法 -->
    <!-- <XtxTabs v-model="activeName" @tab-click="changeTab">
      <XtxTabsPanel label="选项卡" name="first">内容</XtxTabsPanel>
      <XtxTabsPanel
        v-for="i in 4"
        :key="i"
        :label="`选项卡${i}`"
        :name="`name${i}`"
        >内容{{ i }}</XtxTabsPanel
      >
    </XtxTabs> -->
    <!-- tab组件 -->
    <XtxTabs v-model="activeName" @tab-click="tabClick">
      <XtxTabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <!-- {{ item.label }} -->
      </XtxTabsPanel>
    </XtxTabs>
    <!-- 订单列表 -->
    <div class="order-list">
      <div v-if="loading" class="loading"></div>
      <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
      <OrderItem
        v-for="item in orderList"
        :key="item.id"
        :order="item"
        @on-cancel="handlerCancel"
        @on-delete="handlerDelete"
        @on-confirm="handelerConfirm"
        @on-logistics="handlerLogistics"
      ></OrderItem>
    </div>
    <!-- 分页组件 -->
    <xtx-pagination
      v-if="total > 0"
      :currentPage="reqParams.page"
      :pageSize="reqParams.pageSize"
      @currentChange="reqParams.page = $event"
      :total="total"
    ></xtx-pagination>
  </div>
  <OrderCancel ref="orderCancelCom"></OrderCancel>
  <!-- 查看物流组件 -->
  <OrderLogistics ref="OrderLogisticsCom"></OrderLogistics>
</template>

<script>
import { orderStatus } from '@/api/constants'
import { findOrderList, delteOrder, confirmOrder } from '@/api/order'
import OrderItem from './components/order-item.vue'
import { reactive, ref, watch } from 'vue'
import xtxPagination from '@/components/library/xtx-pagination.vue'
import OrderCancel from './components/order-cancel.vue'
import Confirm from '@/components/library/Confirm'
import Message from '@/components/library/Message'
import OrderLogistics from './components/order-logistics.vue'
export default {
  components: { xtxPagination, OrderItem, OrderCancel, OrderLogistics },
  name: 'MemberOrder',
  setup () {
    const activeName = ref('all')
    // const changeTab = (tab) => {
    //   console.log(tab)
    // }
    // 获取数据
    const orderList = ref([])
    const loading = ref(false)
    const total = ref(0)
    const reqParams = reactive({
      page: 1,
      pageSize: 10,
      orderState: 0
    })
    const getOrderList = () => {
      console.log(reqParams)
      console.log('更新状态')
      loading.value = true
      findOrderList(reqParams).then(data => {
        orderList.value = data.result.items
        total.value = data.result.counts
        loading.value = false
      })
    }
    watch(reqParams, () => {
      getOrderList()
    }, { immediate: true })
    // 更新列表方法
    // 点击选项卡 帅选条件从心加载
    const tabClick = ({ index }) => {
      reqParams.page = 1
      reqParams.orderState = index
    }
    // 删除订单
    const handlerDelete = (order) => {
      Confirm({ text: '亲,您确认删除该订单吗' }).then(() => {
        delteOrder(order.id).then(() => {
          Message({ type: 'success', text: '删除成功' })
          // 更新删除列表
          getOrderList()
        })
      }).catch(e => { })
    }
    return { activeName, reqParams, orderStatus, orderList, tabClick, loading, total, ...useCancel(), handlerDelete, ...useConfirm(), ...useLogistics() }
  }
}
// 取消订单逻辑
export const useCancel = () => {
  // 组件实例
  const orderCancelCom = ref(null)
  const handlerCancel = (order) => {
    // 点击取消 打开对话框
    // console.log(order)
    orderCancelCom.value.open(order)
  }
  return { handlerCancel, orderCancelCom }
}
// 确认收货逻辑
export const useConfirm = () => {
  const handelerConfirm = (order) => {
    Confirm({ text: '亲,您确认收货吗?确认后货款将打给卖家' }).then(() => {
      confirmOrder(order.id).then(() => {
        Message({ text: '确认收货成功', type: 'success' })
        // 代收货 变成带评价 是state 不要写成status
        order.orderState = 4
        // 更新订单列表
      })
    }).catch(e => { })
  }
  return { handelerConfirm }
}
// 查看物流逻辑
export const useLogistics = () => {
  const OrderLogisticsCom = ref(null)
  const handlerLogistics = (order) => {
    // 打开查看物流的对话框
    OrderLogisticsCom.value.open(order)
  }
  return { handlerLogistics, OrderLogisticsCom }
}
</script>
<style  scoped lang="less">
.member-order {
  height: 100%;
  background: #fff;
  .order-list {
    background: #fff;
    padding: 20px;
  }
  .order-list {
    padding: 20px;
    position: relative;
    min-height: 400px;
    .loading {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(255, 255, 255, 0.9)
        url(../../../assets/images/loading.gif) no-repeat center;
    }
    .none {
      height: 400px;
      text-align: center;
      line-height: 400px;
      color: #999;
    }
  }
}
</style>
